<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页</title>
    <link rel="stylesheet" href="__PUBLIC__/HomeCss/register.css" type="text/css">
    <script src="__PUBLIC__/Js/jquery.js"></script>
</head>
<body>
    <div class="title">
        <a href="<{:U('Home/Index/index')}>"><img src="__PUBLIC__/Photo/Home/Cart/logo.png" alt="logo" title='logo' class="logo"></a>
        <span class="status2"><a href="<{:U('Home/User/login')}>">登录</a>&nbsp;|&nbsp;<a href="<{:U('Home/User/register')}>">注册</a></span>
    </div>
    <div class="body">
        <form action="<{:U('doRegister')}>" method="post" id="frm" >
        <table align='center' width='350px'>
        <caption align="left"><h3>用户注册</h3></caption>
            <tr>
                <th width="80px">用户名</th>
                <td><input type='text' name='uname' class="uname"><br><span id="checkname1" class='state1'>请输入用户名</span></td>
            </tr>
            <tr>
                <th>密&nbsp;码</th>
                <td><input type='password' name='pwd' class="pwd"><br><span class='state1'>请输入密码</span></td>
            </tr>
            <tr>
                <th>确认密码</th>
                <td><input type='password' name='pwd2' class="pwd2"><br><span class='state1'>请再次输入密码</span></td>
            </tr>
            <tr>
                <th>性&nbsp;别</th>
                <td><input type='radio' name='sex' value=1 checked>男 <input type='radio' name='sex' value=0>女</td>
            </tr>
            <tr>
                <th>邮&nbsp;箱</th>
                <td><input type='text' name='email' class="email"><br><span class='state1'>请输入邮箱</span></td>
            </tr>
            <tr>
                <th>电&nbsp;话</th>
                <td><input type='text' name='tel' class="tel"><br><span class='state1'>请输入手机号码</span></td>
            </tr>
            <tr>
                <th>验证码</th>
                <td><input type='text' name='code' id="code" class="code">
                    <img onclick="this.src='<{:U('/Home/User/verify')}>?'+Math.random()" src="<{:U('/Home/User/verify')}>"> <br>
                    <span id="checkcode1" class='state1'>请输入验证码</span>  
                </td>
            </tr>
            <tr>
                <td colspan="2"><input type="checkbox" name="ckb" checked>我已我已阅读并接受 <a href="">《Flyme服务协议条款》</a></td>
            </tr>
            <tr style="height:80px;">
                <td colspan=2 align="center"><input type="button" class="submit" value="提交" ></td>
            </tr>
        </table>
        </form>
    </div>
<!-- js代码部分 -->
<script>
    $(function(){
        var ok1=false;
        var ok2=false;
        var ok3=false;
        var ok4=false;
        var ok5=false;
        var ok6=false;
        // 验证用户名
        $('.uname').focus(function(){
            $('#checkname1').text('用户名应该为3-12位之间').removeClass('state1').addClass('state2');
        }).blur(function(){
            if($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=''){
        // 验证用户名存在
                var uname = $(this).val();
                $.get('<{:U("checkName")}>',{uname:uname},function(data){ 
                    if(data.status==false){                       
                        $('#checkname1').text(data.msg).removeClass().addClass('state3');
                        return;
                    }else{
                        $('#checkname1').text('输入成功').removeClass().addClass('state4');
                        ok1=true;                
                    }
               },'json');    
            }else{
                $('#checkname1').text('用户名应该为3-12位之间').removeClass().addClass('state3');
            }             
        });
        //验证密码
        $('.pwd').focus(function(){
            $(this).next().next().text('6~20位字母数字').removeClass().addClass('state2');
        }).blur(function(){
            if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=''){
                $(this).next().next().text('输入成功').removeClass().addClass('state4');
                ok2=true;
            }else{
                $(this).next().next().text('6~20位字母数字').removeClass().addClass('state3');
            }
             
        });

        //验证确认密码
            $('.pwd2').focus(function(){
            $(this).next().next().text('请保持密码一致').removeClass().addClass('state2');
        }).blur(function(){
            if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!='' && $(this).val() == $('input[name="pwd"]').val()){
                $(this).next().next().text('输入成功').removeClass().addClass('state4');
                ok3=true;
            }else{
                $(this).next().next().text('请保持密码一致').removeClass().addClass('state3');
            }
             
        });

        //验证邮箱
        $('.email').focus(function(){
            $(this).next().next().text('请输入正确的EMAIL格式').removeClass().addClass('state2');
        }).blur(function(){
            if($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){
                $(this).next().next().text('请输入正确的EMAIL格式').removeClass().addClass('state3');
            }else{                  
                $(this).next().next().text('输入成功').removeClass().addClass('state4');
                ok4=true;
            }  
        });

        //验证手机
        $('.tel').focus(function(){
            $(this).next().next().text('请输入正确的手机格式').removeClass().addClass('state2');
        }).blur(function(){
            if($(this).val().search(/^1[3|4|5|7|8]\d{9}$/)==-1){
                $(this).next().next().text('请输入正确的手机格式').removeClass().addClass('state3');
            }else{                  
                $(this).next().next().text('输入成功').removeClass().addClass('state4');
                ok5=true;
            }  
        });

     //验证验证码
            $('input[name="code"]').focus(function(){
                $('#checkcode1').text('请输入验证码').removeClass().addClass('state2');
            }).blur(function(){
                console.log('haqweqweha');
                if($('input[name="code"]').val().length==4){
                    var code = $(this).val();
                    $.get('<{:U("checkcode")}>',{code:code},function(data){ 
                        console.log('hahahhaha');
                            if(data.status==false){                       
                                $('#checkcode1').text(data.msg).removeClass().addClass('state3');
                                return;
                            }else{
                                $('#checkcode1').text('验证成功').removeClass().addClass('state4');
                                ok6=true;                
                            }
                       },'json'); 
                }else{
                    $('#checkcode1').text('请输入验证码').removeClass().addClass('state3');
                }
            });
        //提交按钮,所有验证通过方可提交
        $('.submit').click(function(){
            if(ok1 && ok2 && ok3 && ok4 && ok5 && ok6){
                $('#frm').submit();
            }else{
                alert("请填写完整信息");
                return false;
            }
        });
         
    });
</script>



</body>
</html>



 
